<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{
      background: '#f4f4f4',
      padding: 0,
      height: '40px'
    }"
    :cell-style="{ padding: 0, height: '26px' }"
    highlight-current-row
    border
    element-loading-text="加载中"
  >
    <template v-for="(item, _index) in tableConfig.thead">
      <el-table-column
        v-if="item.type === 'function'"
        :key="_index"
        :style="item.width"
      >
        <template slot-scope="scope">
          <span
            v-html="item.callback && item.callback(scope, item.prop)"
          ></span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="item.type === 'table'"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  name: 'ELTable',
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    tableData: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  data() {
    return {
      tableConfig: {}
    }
  },
  methods: {
    initConfig() {
      for (const key in this.config) {
        if (Object.keys(this.config).includes(key)) {
          this.tableConfig[key] = this.config[key]
          this.initTableData()
        }
      }
    },
    initTableData() {
      console.log(this.tableData)
    }
  },
  watch: {
    config: {
      handler(newValue) {
        setTimeout(() => {
          this.initConfig()
        }, 0)
      },
      immediate: true
    }
  }
}
</script>

<style ELTable lang="less" scoped></style>
